<template>
<div class='spotsdetail'>
  <!-- <div class="header"> -->
    <!-- <Header
      :menuTitle="menuTitle"
      :navGuideName="navGuideName"
      :menuName="menuName"></Header> -->
  <!-- </div> -->
  <div class="home-return">
    <div class="return-button" @click="returnHandle"></div>
  </div>
  <div class="content">
    <!-- <div class="nav">
      <NavGuide :current="currentIndex"></NavGuide>
    </div> -->

    <!-- 图斑信息 -->
    <div class="chart-spots">
      <!-- 基本信息 -->
      <div class="spots-baseInfo">
        <ImpBorder></ImpBorder>
        <p class="chart-legend"><span>拆违图斑基本信息 <sub>[{{miji}}]</sub></span><cite class="legendActive"></cite></p>
        <div class="baseInfo-box">
          <GeminiScrollbar class="my-scroll-bar">
              <table class="spots-table">
                <tr v-for="(item,index) in leftBaseInfodata" :key="index" >
                  <td>{{item.name}}</td>
                  <td :title="item.content">{{item.content}}</td>
                  <td>{{item.name1}}</td>
                  <td :title="item.content1">{{item.content1}}</td>
                </tr>
              </table>
          </GeminiScrollbar>
        </div>
      </div>
      <!-- 图斑绩效 -->
      <div class="spots-cwjx">
        <ImpBorder></ImpBorder>
        <p class="chart-legend"><span>拆违图斑绩效 <sub>[{{miji}}]</sub></span><cite class="legendActive"></cite></p>
        <div class="cwjx-box">
          <!-- <template v-if="curPopData.length>0 && (isNaN(Number(curPopData.join(''))) || Number(curPopData.join('')) > 0)"> -->
            <div class="cwjx-wrap" v-for="(item,index) in pop" :key="index">
              <div><img :src="item.imgurl"></div>
              <div>
                <p class="cwjx-name">{{item.title}}</p>
                <p class="cwjx-num">
                  <span v-if="curPopData[index]==null || curPopData[index]==0 || curPopData[index]=='0'">--</span>
                  <span v-else>{{curPopData[index]}}</span>
                  <span>{{item.unit}}</span>
                </p>
              </div>
            </div>
          <!-- </template>
          <template v-else>
            <div class="data-empty">
              暂无数据
            </div>
          </template> -->
        </div>
      </div>
      <!-- 图斑实景 -->
      <div class="spots-image">
        <ImpBorder></ImpBorder>
        <p class="chart-legend">
          <cite class="legendActive"></cite>
          <span>拆违图斑实景 <sub>[{{miji}}]</sub></span>
          <span class="camera">摄像头实时监控<img :src="imgCamera"></span>
        </p>
        <div class="cwbefore">
          <div class="spots-name">拆违前</div>
          <template v-if="curSpotsImgList.before.length>0">
            <swiper :options="swiperOption" ref="mySwiper" style="margin:0 3px">
              <swiper-slide v-for="(spt,index) in curSpotsImgList.before" :key="index">
                <div class="img-wrap" style="height: 130px;">
                  <el-image :src="spt" fit="container" style="width: auto; height:100%"></el-image>
                </div>
              </swiper-slide>
            </swiper>
          </template>
          <template v-else>
            <div class="data-empty">
              暂无数据
            </div>
          </template>
        </div>

        <div class="cwafter">
           <div class="spots-name">拆违后</div>
            <template v-if="curSpotsImgList.after.length>0">
              <swiper :options="swiperOption" ref="mySwiper" style="margin:0 3px">
                <swiper-slide v-for="(spt,index) in curSpotsImgList.after" :key="index">
                  <div class="img-wrap" style="height: 130px;">
                    <el-image :src="spt" fit="container" style="width: auto; height:100%"></el-image>
                  </div>
                </swiper-slide>
              </swiper>
            </template>
            <template v-else>
              <div class="data-empty">
                暂无数据
              </div>
            </template>
        </div>

      </div>
    </div>
    <!-- 地图 -->
    <div class="map-wrap">
      <div class="map-left">
        <el-button @click="isVisibleRight=!isVisibleRight" size="mini">分屏</el-button>
        <div class="tabmenu">
            <Tabmapmenu :pos="leftpos"></Tabmapmenu>
        </div>
        <div class="map-time map-left-time">
          <MapControl :isColumn="true" mapTypes="vector_vector1" :isSplitScreen="true" :isFloatTest="false"/>
        </div>
      </div>
      <div class="map-right" v-show="isVisibleRight">
        <div class="tabmenu">
            <Tabmapmenu :pos="rightpos"></Tabmapmenu>
        </div>
         <div class="map-time map-right-time">
          <MapControl :isColumn="true" mapTypes="vector_vector2" :isSplitScreen="true" :isFloatTest="false"/>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Header from '@/components/Header'
import NavGuide from '@/components/NavGuide'
import ImpBorder from '@/components/ImpBorder'
import Tabmapmenu from '@/components/Tabmapmenu'
import TimeSlider from '@/components/TimeSlider'
import MapControl from '@/components/MapControl'
import bus from '@/modules/eventbus'
export default {
  name: 'spotsdetail',
  components: {
    Header,
    NavGuide,
    ImpBorder,
    Tabmapmenu,
    TimeSlider,
    MapControl
  },
  data () {
    return {
      leftpos: 'left', // 标记左右不同的tab和时间轴
      rightpos: 'right',
      menuTitle: '', // 头部信息
      navGuideName: '',
      menuName: '',
      // isShowLayer: false,
      // isVisibleRight: false,
      currentIndex: 2, // 父传子的index 高亮的navindex
      spotsImgList: [],
      baseInfodata: [ // 拆违图斑基本信息
        //   { name: '台账号', time: '201910018353' },
        // { name: '拆违上账时间', time: '2019年1月' },
      ],
      leftBaseInfodata: [],
      imgCamera: require('../assets/images/camera.png'),
      pop: [{
        imgurl: require('../assets/images/detail_01.png'),
        title: '疏解居住人口',
        unit: '人'
      },
      {
        imgurl: require('../assets/images/detail_02.png'),
        title: '疏解就业人口',
        unit: '人'
      },
      {
        imgurl: require('../assets/images/detail_03.png'),
        title: '疏解企业数量',
        unit: '家'
      }],
      popData: [],
      opacityValue: 0,
      swiperOption: {
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
        loop: true,
        slidesPerView: 3,
        spaceBetween: 20,
        autoHeight: true,
        coverflow: { // (轮播图切换方式)
          rotate: 30,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows: true
        }
      },
      miji: '机密'
    }
  },
  methods: {
    returnHandle () {
      this.$store.dispatch('changeregionlevel', '3')
      this.$router.go(-1)
    }
  },
  computed: {
    curSpotsImgList () {
      let temp = { 'before': [], 'after': [] }
      if (this.spotsImgList instanceof Array && this.spotsImgList.length > 0) {
        this.spotsImgList.map(item => {
          if (item['flag'] == 0) {
            temp['before'].push(window.appcfg.spotImg2019_1 + item['name'])
          } else if (item['flag'] == 1) {
            temp['after'].push(window.appcfg.spotImg2019_2 + item['name'])
          }
        })
      }
      return temp
    },
    curApiUrl () {
      return this.$store.getters.curApiUrl
    },
    curPopData () {
      return this.popData
    },
    isVisibleRight: {
      set (val) {
        this.$store.state.tabvalue.isVisibleRight = val
      },
      get () {
        return this.$store.getters.isVisibleRightMap
      }
    }
  },
  watch: {
    isVisibleRight (newVal) {
      this.$store.dispatch('changeVisibleState', newVal)
    },
    baseInfodata (val) {
      this.leftBaseInfodata = []
      for (let i = 0; i < 8; i++) {
        let info = val[i]
        let info2 = ((i + 8) < val.length) ? val[i + 8] : null
        if (info2) {
          info['name1'] = info2.name
          info['content1'] = info2.content
        }
        this.leftBaseInfodata.push(info)
      }
    }
  },
  mounted () {
    if (localStorage.getItem('model')) {
      let mijiDic = { 1: '机密', 2: '秘密', 3: '内部' }
      let model = JSON.parse(localStorage.getItem('model'))
      this.miji = mijiDic[model[2]]
    }
    let self = this
    this.menuTitle = this.$route.meta.menuTitle
    this.navGuideName = this.$route.meta.navGuideName
    this.menuName = this.$route.meta.menuName
    bus.$on('getspotsbaseinfo', val => {
      val.map(item => {
        if (item.name == '台账号') {
          // 图斑id
          let params = {
            ID: item.content
          }
          // 请求人口数据
          self.$axios.get(`${self.curApiUrl}/api/tubanserver?params=${JSON.stringify(params)}`).then(res => {
            // self.popData = Object.values(res.data)
            let data = res.data
            self.popData = [data['homepop'], data['workpop'], data['industry']]
          })
          // 请求图片链接
          self.$axios.get(`${self.curApiUrl}/api/imageserver?params=${JSON.stringify(params)}`).then(res => {
            self.spotsImgList = res.data
          })
        }
      })
      this.baseInfodata = val
    })
  }
}
</script>
<style lang='stylus'>
.home-return
  height 65px
  background url('../assets/return.png') no-repeat center
  padding-top: 10px;
  padding-left: 1700px;
  .return-button
    width 50px
    height 50px
    top 10px
    left 10px
    margin 0 auto
    cursor: pointer;
.spotsdetail
  .chart-spots
    // width 610px
    height 100%
    margin 0 15px
    display flex
    flex-direction column
    justify-content space-around

    > div
      margin-bottom 20px
      position relative
      -moz-box-shadow 1px 1px 5px #aaa inset
      -webkit-box-shadow 1px 1px 5px #aaa inset
      box-shadow 1px 1px 5px #aaa inset

      &:last-child
        margin-bottom 0
        border 0

      .chart-legend
        position relative
        // height 30px
        // line-height 30px
        // font-size 20px
        font-weight bold
        color #fff
        // padding 10px 35px

      .chart-legend cite.legendActive
        position absolute
        left 2px
        // top 17px
        width 3px
        // height 20px
        background #FDC610
        // margin-left 22px
      .camera
        position absolute
        right 10px
        top 10px
        img
          width: 30px;
          height: 30px;
          margin-left: 3px;
    // 图斑基本信息
    .spots-baseInfo
      width 100%
      // height 38%
      .baseInfo-box
        width 100%
        // height calc(100% - 62px)
        // padding 5px 15px
        // margin 5px 15px

    // 图斑绩效
    .spots-cwjx
      // height 25%
      .cwjx-box
        display flex
        height 100px
        .cwjx-wrap
          display flex
          align-items center
          flex 1
          text-align center
          margin-left 30px
          padding 0
          &:last-child
            margin-right 10px
          .cwjx-name
            // font-size 15px
          .cwjx-num
            // font-size 36px !important
            // font-weight bold !important
            color #FDC610 !important

    // 图斑实景
    .spots-image
      width 100%
      // height 35%
      // .my-scroll-image
      // .image-box
      .scroll-image
        width 100%
        height calc(100% - 64px)
        overflow hidden
        overflow-x scroll
        overflow-y hidden
        white-space nowrap
        .img-wrap
          width 200px
          height 100%
          display inline-block
          margin 0 10px
          .el-image
            width 200px
            height 100%
            img
              width 300px
              height 380px
      .spots-name
        padding 0 20px
// ~~~~~~~~地图
.map-wrap
  // width calc(100% - 700px)
  height 100%
  display flex

  .map-left
    flex 1
    position relative
    z-index 10
    margin-right 2px

    button
      position absolute
      z-index 20
      top 10px
      left 10px

    .tabmenu
      position absolute
      z-index 20
      // bottom  30px
      // right 0px
      // width 562px
      margin 0 auto

      ul
        height 30px
        line-height 30px

        li
          height 30px
          line-height 30px
    // .layer-opacity
    //     width 200px
    //     position absolute
    //     margin-top: 100px
    //     margin-left: 20px
  .map-right
    flex 1
    display block
    position relative
    margin-left 2px
    .tabmenu
      position absolute
      z-index 20
      // bottom  30px
      // right 0px
      // width 562px
      margin 0 auto

      ul
        height 30px
        line-height 30px

        li
          height 30px
          line-height 30px

  .map-time {
    width 100%
    height 100%
  }

  // 地图的toolbar
  .map-left-time
  .map-right-time
    position relative

  .map-left-time
  .map-right-time
    .toolbar
        position absolute
        bottom 10px
        left 10px

// 表格去边框
.spotsdetail
  table
    width 100%
    height 100%
    td
      border none
      padding 0 10px
      text-align left
      &:first-child
        // width 134px
        overflow hidden
        text-overflow ellipsis
        white-space nowrap

// 滚动条
.spotsdetail
  .my-scroll-bar
    height 100%
  .gm-scrollbar .thumb
    background-color rgba(255,255,255,0.1)
  .gm-scrollbar-container .gm-scroll-view
    transform none
  .gm-scrollbar.-horizontal
    display none

.cwafter,.cwbefore
  position:relative;
  width:100%;
  height:170px;

.cwafter
  margin-top:10px;

.data-empty
    position absolute
    // left calc(50% - 24px)
    // top calc(50% - 30px)
.cwbefore .data-empty{
  position:absolute;
  left:calc(50% - 24px);
  top:38%;
}
.cwafter .data-empty{
  position:absolute;
  left:calc(50% - 24px);
  top: 50%;
}
.map-wrap
  .map-left
  .map-right
    .baselyrbtn
      left: 100px

// .map-slider

.spotsdetail table
  margin 0 10px

.spots-table
  table-layout fixed

  tr
    line-height 0

.spots-table
  td
    width 30%
    white-space nowrap /*文本不会换行，在同一行显示*/
    overflow hidden /*超出隐藏 */
    text-overflow ellipsis /*省略号显示*/

    &:nth-child(odd)
      width 20%
      text-align right
      font-weight bold

</style>
